<template>
  <div class="contain listbdg"  ref="video-list">
    <div class="topHead">
      <img :src="imageSrc">
      <p class="subject">{{subject}}</p>
      <p class="info" v-if="type == 6">适配人教版小学一年级下册教材</p>
    </div>
    <div class="video" >
      <div class="video-item" v-for="(item,index) in videoList" :key="item.id" @click="goVideoPlay(item,index)" id="scroll">
        <div class="video-box">
          <img v-lazy="item.pic">
          <!-- <video ref="video" class="noshow"  preload="metadata" :src="item.filePath" :poster="item.pic">
            您的浏览器不支持 video 标签。
          </video> -->
        </div>
        <div class="video-info">
          <div class="topTxt"> <div class="info-name ellipsisTwo">{{item.title}}</div></div>
          <div class="info-time">
            <span class="time"></span><span>{{item.times}}</span>
            &emsp; &emsp; &emsp;
            <span class="viewNum"></span><span>{{item.viewNum}}</span>
          </div>
        </div>
      </div>
	  <div class="center" v-html="bottomTip"></div> 
    </div>
    <DPlayer ref="player"></DPlayer>
  </div>
</template>

<script>
import {GetResourcesList,UpdateResourcesViewNum} from '@/api/index'
export default {
    data(){
        return{
            videoList:[],
            type:'',
            pageindex:1,
            pagesize:5,
            imageSrc:'',
            bottomTip:""
        }
    },
    mounted() {
      this.type = this.$route.query.type
      this.initImage()
      this.getResourcesList()
       this.$nextTick(()=>{
			 this.$refs['video-list'].addEventListener('scroll',this.handleScroll)
			//  document.addEventListener('onresize',this.updataView)
			//  window.onresize =()=>{
			// 	 this.checkFull() ? this.
			//  }
        })
    },
    computed:{
      subject(){
        switch (this.type) {
          case '1':
              return '数学游戏'
            break;
          case '2':
              return '美术美工'
            break;
          case '3':
              return '科学实验'
            break;
          case '4':
              return '音乐律动'
            break;
           case '5':
              return '故事阅读'
            break;
          case '6':
              return '小学数学'
            break;
          case '7':
              return '小学成语故事'
            break;
          case '8':
              return '初中数学'
            break;
          case '9':
            return '初中语文'
            break;
          case '10':
              return '高中数学'
            break;
          case '11':
              return '高中语文'
            break;
          case '12':
              return '中考提分课'
            break;
          default:
            break;
        }
      }
    },
    methods: {
      initImage(){
          let mini = ['1','2','3','4','5']
          let small=['6','7']
          let middle = ['8','9','10','11','12']
          console.log('type',small.includes(this.type))
          this.imageSrc = small.includes(this.type) ? require('@/assets/img/s-banner.png') : mini.includes(this.type) ? require('@/assets/img/mi-banner.png') : middle.includes(this.type) ? require('@/assets/img/m-banner.png') :''
	  },
	  // updataView(){
		//   console.log('888888888888')
	  // },
      handleScroll(){
        let bodyH = this.$refs['video-list'].clientHeight;
        let scrollH = this.$refs['video-list'].scrollTop;
        let listH=this.$refs['video-list'].scrollHeight;
        // console.log(scrollH+bodyH +10 >=listH,"高度判断")
        // console.log(this.isLoading,"Scroll")
        if(scrollH+bodyH +10 >=listH){
            // this.bottomTip='努力加载中...'
            this.pageindex=this.pageindex+1;
            if(this.pageindex <= this.totalPage){
                this.getResourcesList()
            }else{
                if(this.videoList.length>0){
                    this.bottomTip='没有更多数据'
                    console.log('没有更多数据')
                }else{
                	this.bottomTip='暂无数据'; 
                }
            }
        } 
      },
      getResourcesList(){
        GetResourcesList({type:this.type,pageindex:this.pageindex,pagesize:this.pagesize}).then((res)=>{
            this.videoList.push(...res.list)
            this.totalPage = res.pageCount
            console.log('list',this.videoList)
        })
      },
      goVideoPlay(item,index){
          console.log(index)
          // this.FullScreen(this.$refs.video[index])
          // this.$refs.video[index].addEventListener('exitFullScreen',this.checkFull())
          // this.$refs.video[index].play()
          this.$refs.player.videoPlay(item.filePath)
          this.updateReviewCount(item.id,index)
          
      },
      updateviewCount(index){
        this.videoList.map((item,inx)=>{
          if(index==inx){
            item.viewNum = item.viewNum+1
          }
        })
      },
      updateReviewCount(id,index){
        UpdateResourcesViewNum({id:id}).then((res)=>{
            // console.log(res)
            this.updateviewCount(index)
            // this.getResourcesList()
        })
      },
      // invokeFieldOrMethod(){
        
      // },
      FullScreen(ele) {
        if (ele.requestFullscreen) {
           console.log('ele--------1',ele)
            ele.requestFullscreen();
        } else if (ele.mozRequestFullScreen) {
            console.log('ele--------2',ele)
            ele.mozRequestFullScreen();
             
        } else if (ele.webkitRequestFullScreen) {
            console.log('ele--------3',ele)
            ele.webkitRequestFullScreen();
        }
      },
      checkFull(){
        console.log('000000000000')
      // 　　　　let isFull = document.fullscreenEnabled || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled;
      // 　　　　if(isFull === undefined) isFull = false;
      // 　　　　return isFull;
	    }
	},

}
</script>

<style lang="scss" scoped>
 .listbdg{
   background: #FFFFFF;
   .topHead{
     position: relative;
      img{
      width: 100%;
      height: 3.3rem;
    }
     .subject{
         position: absolute;
        left: .42rem;
        top: .8rem;
        font-size: 0.56rem;
        font-weight: normal;
        color: #FFFFFF;
        line-height: 0.64rem;
    }
    .info{
        left: .43rem;
        top: 1.6rem;
        font-size: 0.26rem;
        position: absolute;
        font-weight: bold;
        color: #FFFFFF;
    }

   }
  .video{
     padding: 0 .32rem;
      width: 100%;
      min-height: calc(100% - 2rem);
      margin-top: -.4rem;
      z-index: 9999;
      position: absolute;
      top: 2.8rem;
      
      .video-item{
        width:100%;
        height: 2.2rem;
        background: #FFFFFF;
        box-shadow: 0rem 0rem 1rem 0rem #DBE2E5;
        border-radius: 0.4rem;
        margin-bottom: .4rem;
        padding: .2rem .8rem .2rem .2rem;
        display: flex;
        .video-box{
          width: 2.7rem;
          height: 1.8rem;
          border-radius: .4rem;
          overflow: hidden;
          position: relative;
          margin-right: .4rem;
          img{
            width: 100%;
            height: 100%;
            object-fit: cover;
          }
          .noshow{
              position: absolute;
              top: 0;
              left: 0;
              width: 2.7rem;
              height: 1.6rem;
              border-radius: .3rem;
              opacity: 0;
          }
        }
        .video-info{
          flex: 1;
          .topTxt{
            height: 1.3rem;
            .info-name{
              font-size: 0.32rem;
              font-weight: bold;
              color: #333333;
              // min-height: 1.3rem;
              margin-bottom: .5rem;
            }
          }
          .info-time{
            display: flex;
            align-items: center;
            color: #999999;
            font-size: .22rem;
            .time{
              background: url('~@/assets/img/time-icon.png') no-repeat;
              background-size: cover;
              display:block;
              width: .2rem;
              height: .2rem;
              margin-right: .21rem;
            }
            .viewNum{
              background: url('~@/assets/img/bo-icon.png') no-repeat;
              background-size: cover;
              display:block;
              width: .16rem;
              height: .18rem;
              margin-left: .4rem;
              margin-right: .21rem;
            }
          }
          
        }
	  }
	  .center{
		  color: #999999;
		  font-size:.22rem ;
		  margin-bottom: .2rem;
	  }
  }
 }

</style>